<template>
	<view class="content">
		<!-- <view class="sobox">
			<my-sobox placeholder="请输入搜索内容"></my-sobox>
		</view> -->
		<view class="bannerbox">
		
			<swiper class="swiper" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="item in banner">
					<view class="swiper-item">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
				</swiper-item>
			
			</swiper>
		</view>
	
		<view class="titlebox">
			<d-tab :list="tabList" :defaultCurr="defaultCurr" @tabClick="tabClick"></d-tab>
			<view class="addressbox"  @click="$util.$navigateTo('./areaselect')">
				<text>{{address}}</text>
			</view>
		</view>
		<view class="indexList">
			<template v-for="item in list" >
				<view class="indexList-item" @click="detail(item)">
					<view class="cell01">
						<image :src="item.user.avatar"></image>
					</view>
					<view class="cell02">
						<view class="row01">
							<text class="name">{{item.user.username}}</text>
							<text class="phone">{{item.user.mobile}}</text>
						</view>
						<view class="row02"><text>{{item.worktype.workname}}</text></view>
					</view>
					<view class="cell03">
						<view class="row01">期望</view>
						<view class="row02">{{item.money}}元/月</view>
					</view>
				</view>
				<view class="line"></view>
			</template>
		</view>
		<view class="br-btn">
			<image src="../../static/btnbg.png"></image>
			<button @click="$util.$navigateTo('./fabu')">发布</button>
		</view>
	</view>
</template>

<script>
	import mySobox from '@/components/my-sobox.vue'
	import dTab from '@/components/dTab.vue'
	export default {
		components:{
			mySobox,
			dTab
		},
		data() {
			return {
				autoplay: true,
				interval: 2000,
				duration: 500,
				defaultCurr: '0',
				tabList: [{
					name: '推荐',
					status: '0'
				}],
				list: [],
				address:'长沙',
				page:1,
				isLastPage:false,
				banner:[]
			}
		},
		onShow:function() {
			this.address=this.$util.$getStorageSync("address")
			this.list = [];
			this.getList();
		},
		onLoad(){
		
		},
	
		methods: {
			
			detail(item){
				console.info("===click====");
				
				uni.navigateTo({
					url:'./indexDetail?id='+item.id
				})
			},
			getList() {
				let param = {
					page: this.page,
				}
				let that = this;
				this.$api.worklist(param).then(res => {
					if (res.code == 1) {
						that.banner = res.data.banner;
						let length = res.data.list.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data.list[i]);
						}
						if (length < 10) {
							that.isLastPage = true;
						} else {
							that.isLastPage = false;
						}
					}
			
				})
			},
			search(){
				
			},
			tabClick(status) {
				this.defaultCurr=status
			},
		}
	}
</script>

<style lang="scss">
.sobox{
	margin-left: -10rpx;
	padding:10rpx 30rpx;
	background:$uni-color-primary;
}
.bannerbox{
	margin: 20rpx auto;
	text-align: center;
	image{
		width: 690rpx;
		height: 270rpx;
	}
}
.titlebox{
	position: relative;
	.addressbox{
		position: absolute;
		right: 30rpx;
		top: 0rpx;
		font-size: 24rpx;
		color: #666;
		background: #F5F5F5;
		padding:10rpx 20rpx;
		border-radius: 6rpx;
	}
}
.indexList{
	.indexList-item{
		display: flex;
		padding: 40rpx;
		.cell01{
			margin-right: 30rpx;
			image{
				width:110rpx;
				height: 110rpx;
			}
		}
		.cell02{
			flex: auto;
			.row01{
				display: flex;
				padding-bottom: 30rpx;
				.name{
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					margin-right: 20rpx;
				}
				.phone{
					font-size: 24rpx;
					color: #333333;
					flex: auto;
				}
			}
			.row02{
				display: flex;
				flex: auto;
				text{
					font-size: 22rpx;
					background:#F5F5F5;
					border-radius: 5rpx;
					color: #666666;
					padding: 5rpx 10rpx;
					display: inline-block;
				}
			}
		}
		.cell03{
			.row01{
				font-size: 24rpx;
				padding-bottom: 30rpx;
				color: #ADADAD;
				text-align: right;
			}
			.row02{
				font-size:30rpx;
				color: $uni-color-primary;
				font-weight: bold;
			}
		}
	}
}
.br-btn{
		position: fixed;
		right: 40rpx;
		bottom: 40rpx;
		width: 170rpx;
		height: 170rpx;
		button{
			border-radius: 50%;
			line-height: 170rpx;
			text-align: center;
			color: #ffffff;
			height: 170rpx;
			width: 170rpx;
			font-size: 30rpx;
			letter-spacing: 5rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			background: none;
		}
		image{
			position: absolute;
			top: 0;
			left: 0;
			width: 170rpx;
			height: 170rpx;
			z-index: 1;
		}
	}
</style>
